<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    /* 一、什么是事件？
JavaScript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的。页面载入完成时,
会触发一个事件。用户点击按钮时，点击也是一个事件 */
        .red{
            background-color: red;
        }
        .green{
            background-color: green;
        }
        div{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
        <a href="index.html">首页</a>
        <a href="javascript:;" onclick="history.back()">返回上一页</a>
    <div class="red" id="red">
        我是一个div
    </div>
    <div class="green" id="green" onclick="console.log('我是发生在元素行内的')">

    </div>
    <script>
        // 鼠标事件
        var red=document.getElementById("red");
        red.onmousedown=function(){
            console.log("我被按下了")
        }
        red.onmouseup=function(){
            console.log("我被松开了")
        }
        red.onmousemove=function(){
            console.log("鼠标移入")
        }
        red.onmouseout=function(){
            console.log("鼠标移出")
        }
        // 事件绑定方式
        var green=document.getElementById("green");
        //第一种写法
       green.onclick=function(){
           console.log("我是发生在函数的onclick1")
       }
        //  同样的代码后面会覆盖前面
       green.onclick=function(){
      
           console.log("我是发生在函数的onclick2")
       }
    //    第二种 事件监听类型
       green.addEventListener('click',function(){
           console.log('addEventListener1')
       })
    //    这种不会覆盖
       green.addEventListener('click',function(){
           console.log('addEventListener2')
       })
    // 两次都有
    // 表单验证有2种方法

    </script>
</body>
</html>